<template>
  <div class="jtLogin">
    <header>
      <h3>使用手机号登录</h3>
    </header>

    <section>
      <van-cell-group inset>
        <van-field
          label-class="label_width"
          v-model="phone"
          label="用户名"
          placeholder="请输入用户名"
          type="tel"
        />
        <van-field
          label-class="label_width"
          v-model="password"
          label="密码"
          placeholder="请输入用户名"
          type="password"
        />
      </van-cell-group>
    </section>
    <footer>
      <van-button type="primary">登录</van-button>
      <router-link :to="{ path: '/' }">忘记密码</router-link>
      <router-link :to="{ path: '/page/jtRegister' }">注册</router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'jtLogin',
  data() {
    return {
      phone: '',
      password: ''
    }
  }
}
</script>

<style>
.page {
  height: 100%;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.jtLogin {
  overflow: hidden;
  header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    margin: 100px 0;
  }
  section {
    /deep/ .label_width {
      width: 3em !important;
    }
  }
  footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    .van-button {
      width: 80%;
      height: 100px;
    }
    a {
      margin-top: 20px;
      color: #000;
    }
  }
}
</style>
